<template>
  <view>
    <view class="page-body">		
		<map :style="mapStyle" id="myMap" :latitude="latitude" :longitude="longitude" :markers="markers" :scale="latestScale" show-location enable-scroll @tap="bindtap" @callouttap="callouttap" @regionchange="regionchange" @updated="updated"></map>
    </view>
  </view>
</template>

<script>
export default {
	props: {
		latitude: '',
		longitude: '',
		scale:'',
		storeData: {
		  type: Array,
		  default: [
			{
			  id: "",
			  name: "",
			  address: "",
			  tel: "",
				distance:""
			},
		  ]
		},
		markers: {
		  type: Array,
		  default: [
			{
			  id: '',
			  latitude: String,
			  longitude: String,
			  iconPath: "https://100000063-1252208446.file.myqcloud.com/images/point.png"
			}
		  ]
		}
	},
	data() {
		return {
		  store: {},
		  storeFlag: false,
		  storeAdFlag: true,
		  distanceL: 0, //附近店门的距离
		  latestLatitude: '',
		  latestLongitude: '',
		  controls: [],
		  latestScale:16,
		  mapStyle:'width:690rpx;height:520rpx;',
		  screenWidth:''
		}
	},
 created() {
	var that = this;
 	  uni.getSystemInfo({
 	      success: function (res) {
 	  		that.screenWidth = res.windowWidth;
 			//兼容不同尺寸屏幕判断
 			if(that.screenWidth <= 320){
				that.mapStyle = "width:691rpx;height:520rpx;margin-left:-6rpx;";
 			}else if(that.screenWidth <= 360){
				that.mapStyle = "width:689rpx;height:520rpx;";
 			}else if(that.screenWidth <= 414){
 				 that.mapStyle = "width:695rpx;height:520rpx;";
 			}else if(that.screenWidth <= 768){
 				that.mapStyle = "width:690rpx;height:520rpx;margin-left:17rpx;";
 			}else if(_this.screenWidth <= 834){
 				_this.mapStyle = "width:690rpx;height:520rpx;margin-left:17rpx;";
 			}
 	      }
 	  });
 },
	watch:{
		latitude: function(newVal, oldVal) {
			let that = this;
			that.latestLatitude = newVal;
		},
		longitude: function(newVal, oldVal) {
			let that = this;
			that.latestLongitude = newVal;
		}
	},
  methods: {
    // 点击地图
    bindtap(id) {
		let that = this;
		that.storeFlag = false
      // this.storeAdFlag=true;
    },
    updated() {
      let _this = this;
	  _this.latestScale = 16;
      wx.getLocation({
        type: "gcj02", //返回可以用于wx.openLocation的经纬度
        success: function(res) {
          _this.nearDistance(_this.markers, _this.latestLatitude, _this.latestLongitude)
        },
        fail: function(res) {
   
        }
      })
    },
    // 改变视野时改变经纬度
    regionchange(e) {
      let _this = this
      // 使用 wx.createMapContext 获取 map 上下文 this必须要写 不然没办法得到回调！！！！。
      var mapCtx = wx.createMapContext("myMap", this)
      mapCtx.getCenterLocation({
        success: function(res) {
          _this.centerLatitude = res.latitude
          _this.centerLongitude = res.longitude
          _this.nearDistance(
            _this.markers,
            _this.centerLatitude,
            _this.centerLongitude
          )
        },
        fail: function(res) {

        }
      }) //获取当前地图的中心经纬度
    },
    // 两点间距离
    distance(la1, lo1, la2, lo2) {
      var La1 = (la1 * Math.PI) / 180.0
      var La2 = (la2 * Math.PI) / 180.0
      var La3 = La1 - La2
      var Lb3 = (lo1 * Math.PI) / 180.0 - (lo2 * Math.PI) / 180.0
      var s =
        2 *
        Math.asin(
          Math.sqrt(
            Math.pow(Math.sin(La3 / 2), 2) +
              Math.cos(La1) * Math.cos(La2) * Math.pow(Math.sin(Lb3 / 2), 2)
          )
        )
      s = s * 6378.137 //地球半径
      s = Math.round(s * 10000) / 10000
      return s
    },
    // 计算最近的距离
    nearDistance(array, centerLatitude, centerLongitude) {
      let temp = []
      for (let i = 0, l = array.length; i < l; i++) {
        const element = array[i]
        let d = this.distance(
          element.latitude,
          element.longitude,
          centerLatitude,
          centerLongitude
        )
        temp.push(d)
      }
      this.distanceL = Math.min.apply(null, temp)
    }
  },
}
</script>

<style lang="scss" scoped>
.content {
  text-align: center;
  height: 400rpx;
}
.page-section {
  z-index: 0;
}
.store-tips {
  width: 600rpx;
  height: 100rpx;
  margin: 10rpx auto;
  border-radius: 10rpx;
  position: absolute;
  top: 10rpx;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 2;
  overflow: hidden;
  .store-des-box {
    background: #fff;
  }
  .store-img {
    width: 80rpx;
    height: 80rpx;
    border-radius: 10rpx;
    margin: 10rpx;
    float: left;
  }
  .store-des {
    padding-top: 8rpx;
    float: left;
    line-height: 1;
    font-size: 22rpx;
    color: #666;
    padding-left: 20rpx;
    .store-name {
      font-weight: 600;
      color: deeppink;
    }
  }
  .store-clear {
    width: 30rpx;
    height: 30rpx;
    position: absolute;
    top: 7rpx;
    right: 7rpx;
    margin: 30rpx;
  }
}
.address-icon {
  width: 38rpx;
  height: 40rpx;
  position: absolute;
  top: 22%;
  left: 50%;
  z-index: 2;
  margin-bottom: -20rpx;
  margin-left: -20rpx;
}
.near-num {
  padding: 10rpx 20rpx;
  border-radius: 10rpx;
  position: absolute;
  top: 17%;
  left: 50%;
  z-index: 2;
  font-size: 24rpx;
  background: #fff;
  transform: translate(-50%, 0);
}

.icon{
		width: 70rpx;
		height: 70rpx;
		position: absolute;
		margin-left: 20rpx;
		bottom: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-width: 1px;
		border-style: solid;
		border-color: #ddd;
		border-radius: 50%;
		box-sizing: border-box;
		background-color: white;
	}
	
	.re-locate-icon{
		height: 40rpx;
		position: absolute;
		top: 30%;
		left: 91%;
		z-index: 2;
		margin-bottom: -20rpx;
		margin-left: -20rpx;
		width: 38rpx;
	}
	
	.plus-icon{
		height: 40rpx;
		position: absolute;
		top: 35%;
		left: 91%;
		z-index: 2;
		margin-bottom: -20rpx;
		margin-left: -20rpx;
		width: 38rpx;
	}
	
	.less-icon{
		height: 40rpx;
		width: 38rpx;
		position: absolute;
		top: 40%;
		left: 91%;
		z-index: 2;
		margin-bottom: -20rpx;
		margin-left: -20rpx;
	}

</style>
